<template>
  <div class="waitingAccepting">
    <div class="waitingAccepting-header clearfloat">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/mechanism/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >待接订单</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="btns fr">
        
        <el-button @click="quickApply" class="mr20" >快速申请</el-button>
        <table-search
          class='clearfloat'
          ref="table-search"
          :isGetAgent='true'
          :selectHead="selectHead"
          @searchMethods="searchMethods">
        </table-search>
        
      </div>
      <!-- <orderStatistics 
        class="fr"
        v-if="$store.state.user.is_teacher != 3"
        :myInfo="myInfo"
        :roleID="roleID"
        @getData="getTableData" /> -->
    </div>
    <div class="waitingAccepting-main" ref="watermark">
      <el-table
        ref="tableRef"
        :data="tableData"
        border
        v-loading="loading"
        height='100%'
        @row-click='selectRow'
        @sort-change='tableSortChange'>


				<el-table-column show-overflow-tooltip sortable='custom' prop="order_number" label="订单编号" min-width="180"></el-table-column>
				<!-- <el-table-column show-overflow-tooltip prop="status" label="流程状态" min-width="120" sortable='custom'></el-table-column> -->
				<el-table-column show-overflow-tooltip prop="patent_name" label="拟申报专利名称" min-width="180" sortable='custom'></el-table-column>
				<el-table-column show-overflow-tooltip prop="type" label="专利类型" min-width="130" sortable='custom'></el-table-column>
				<el-table-column
					label="附图"
					sortable='custom'
					min-width="150">
					<template slot-scope="scope">
						<div v-if="scope.row.imgArr" class="img-wrap" @click.stop>
							<pre-img
								:smallImg="scope.row.imgArr"
								:bigImg="scope.row.imgArr2"
								class="pre-img">
							</pre-img>
						</div>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="liaisons" label="联络人" min-width="100" sortable='custom'>
					<template slot-scope="scope">
						<span>{{scope.row.liaisons}}</span>
						<Tooltip  v-if="$store.state.user.is_teacher == 1"  content="点我留言">
							<i class="el-icon-chat-dot-round leaveWord"  @click.stop="leaveWord(scope.row, '1')"></i>
						</Tooltip>
					</template>
				</el-table-column>
				<div v-if="roleID != 2">
					<el-table-column show-overflow-tooltip prop="user_name" label="发明人" width="120" sortable='custom'></el-table-column>
					<el-table-column show-overflow-tooltip prop="patent_user" label="专利权人" width="120" sortable='custom'></el-table-column>
				</div>
				<el-table-column show-overflow-tooltip prop="liaisons_tel" label="电话" min-width="120" sortable='custom'></el-table-column>
				<el-table-column show-overflow-tooltip prop="liaisons_email" label="邮箱" min-width="150" sortable='custom'></el-table-column>
				<el-table-column show-overflow-tooltip label="专属顾问"  min-width="110" prop="process" sortable>
					<template slot-scope="scope">
						<!-- <span v-if="roleID == 4">{{ scope.row.process ? scope.row.process.name : '' }}</span> -->
						<span>{{ scope.row.process | processNumber }}</span>
						<Tooltip  v-if="$store.state.user.is_teacher == 1"  content="点我留言">
							<i class="el-icon-chat-dot-round leaveWord"  @click.stop="leaveWordL(scope.row, '2')"></i>
						</Tooltip>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="submitTime" label="提交时间" min-width="160" sortable >
					<template slot-scope="scope">{{ findData(scope.row) }}</template>
				</el-table-column>
      </el-table>
    </div>
    <div class="waitingAccepting-bottom">
      <pagination @paginationChange="paginateChange" :total="total"></pagination>
    </div>
    <waitingAcceptingInfo ref="waitingAcceptingInfo" @refresh='getTableData'/>
    
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import preImg from '~/components/pre-img'
import waitingAcceptingInfo from './components/waitingAccepting-info'
import { getMyInfo } from "~/api/user"
import Watermark from './components/watermark';
import orderStatistics from '~/components/orderStatistics'
export default {
  components: {
    Pagination,
    tableSearch,
    preImg,
    waitingAcceptingInfo,
    orderStatistics
  },
  data () {
    return {
      isLeaveWord: false,
      showRefund4: false,
      leaveWordText:'',
      privateLetterId:'',
      tableData:[],
      loading: false,
      pageSize: 25, //一页可以几条
      total: 0,
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '拟申报专利名称',
          props: 'patent_name'
        },
        {
          label: '专利类型',
          props: 'type',
          final: false,
        },
        {
          label: '联络人',
          props: 'liaisons',
        },
        {
          label: '发明人',
          props: 'user_name',
        },
        {
          label: '专利权人',
          props: 'patent_user',
        },
        {
          label: '电话',
          props: 'liaisons_tel',
        },
        {
          label: '邮箱',
          props: 'liaisons_email',
        },
        {
          label: '备注',
          props: 'remarks',
        },
        {
          label: '专属顾问',
          props: 'process_id',
        },
        {
          label: '提交时间',
          props: 'createdTime',
        },
      ],
      paramsByOrder: {
        status: "待接单",
        ap_re_order: 1
			},
      myInfo: {
        wait_apply_count: 0,
      },
      roleID: 2,
      baseUrl: global.baseurl,
    }
	},
	watch: {
		tableData: {
			handler: function(val) {
				val.forEach(v => {
					v.imgArr = []
					v.imgArr2 = []
					if (v.thumb_imgs) {
						let arr = v.thumb_imgs.split('&')
						if (v.img) {
							let arr = v.img.split('&')
							for (let i in arr) {
                v.imgArr2.push(this.baseUrl + '/storage/upload/' + arr[i])
							}
						}
						for (let i in arr) {
							v.imgArr.push(this.baseUrl + '/storage/upload/' + arr[i])
						}
					}
				})
			},
			immediate: true
		},

	},
  created () {
    this.getTableData()
  },
  mounted(){
    let user = JSON.parse(sessionStorage.getItem('store'))
    let name = ''
    if (user) {
      name = user.user.name
    } else {
      name = this.$store.state.user.name || ''
    }
    Watermark.set(name, this.$refs.watermark)
  },
  methods: {
    gwm() {
      //水印,非管理员要设置
      if (
        this.$store.state.user.role_id != 1 &&
        this.$route.path != "/admin/register" &&
        this.$route.path != "/admin/personalCenter/dstribution" &&
        this.$route.path != "/admin/personalCenter/myPurse" &&
        this.$route.path != "/admin/activityList/activityConfig" &&
        this.$route.path != "/admin/activityList/sysConfig" &&
        this.$route.path != "/admin/login" &&
        this.$route.path != "/admin/agentImprove" &&
        this.$route.path != "/order/login"
      ) {
        let that = this;
        let gwm = require("gwm");
        gwm.creation({
          txt: that.$store.state.user.name,
          container: ".el-table", //#gwm
          fontSize: 40,
          css:true,
          alpha:0.3
        });
      }
    },
    quickApply () {
      this.$router.push('/user/apply?sumbit_type=2')
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
			}
      params = {...params, ...this.paramsByOrder, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.loading = true
      this.$axios.get('api/order', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
          this.myInfo.wait_apply_count = res.data.count.wait_apply_count
          // this.getMyinfo()
        } else {
          this.loading = false
          this.$message.error('服务器繁忙')
        }
      })
    },

    searchMethods(params, no_search) {
      this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (params.createdTime) {
        params.start_time = params.createdTime[0]
        params.end_time = params.createdTime[1]
        delete params.createdTime
      }
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'asc'
      } else {
        delete this.paramsByOrder.sort_str
        delete this.paramsByOrder.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
		},
		leaveWord(row) {
      let that = this
      that.privateLetterId = row.consumer_id;
      
      let params = {
          receive_uid: that.privateLetterId,
          LorD: '发明人',
          order_number: row.order_number
      }
      if (row.finals_id) {
        params.finals_id = row.finals_id;
      } else {
        params.order_id = row.id;
      }
      that.$alert('即将离开当前页面，去到案件交流', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: action => {
          if(action != 'cancel'){
            that.$router.push({
              path: '/agent/news/communication',
              query: params
            })
          } else {
            that.$message({
              type: 'info',
              message: '用户取消跳转'
            });
          }
        }
      })
    },
    leaveWordL (row) {
      let that = this
      that.privateLetterId = row.process_id;
      let params = {
          receive_uid: that.privateLetterId,
          LorD: '专属顾问',
          order_number: row.order_number
      }
      if (row.finals_id) {
        params.finals_id = row.finals_id;
      } else {
        params.order_id = row.id;
      }
      that.$alert('即将离开当前页面，去到案件交流', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: action => {
          if(action != 'cancel'){
            that.$router.push({
              path: '/agent/news/communication',
              query: params
            })
          } else {
            that.$message({
              type: 'info',
              message: '用户取消跳转'
            });
          }
        }
      })
    },
    
		// 时间
		findData(val) {
			let statusArr = val.statuss;
			let statusTime = "";
			for (const i in statusArr) {
				if (statusArr[i].id == 1) {
					statusTime = statusArr[i].pivot.created_at;
				}
			}
			return statusTime;
		},
    selectRow (row) {
      if(window.getSelection().toString() === ''){
        this.$refs['waitingAcceptingInfo'].show(row)
      }
    },
  }
}
</script>

<style lang='less'>
  .waitingAccepting {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding:  25px 30px 0 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    &-header {
      // height: 45px;
      flex: 0 0 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child {
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
      }
      box-sizing: border-box;
      .btns {
        .el-button {
          border: 1px solid #249dff;
          border-radius: 12px;
          padding: 5px 16px;
          display: inline-block;
          font-size: 15px;
          line-height: 1;
          color: #249DFF;
        }

        .el-button:hover {
          background:rgba(36,157,255,1);
          color: #fff;
        }
      }
    }
    &-main {
      flex: 1;
      max-height:calc(100% - 115px) ;
    }
    &-bottom {
      flex: 0 0 70px;
      padding-top: 19px;
    }
  }
  .leaveWordDialog {
    width: 50%;
    margin: auto;
    .leaveWord-label {
      display: block;
      margin-bottom: 10px;
    }
    .el-textarea {
      display: block;
      margin-bottom: 20px;
    }
  }
</style>
